<template>
    <div class="qr-code-box">
        <span style="text-align: center;font-size: 30px;">商品溯源码</span>
        <br>
        <canvas style="align-content:center;" ref="canvasRef"></canvas>
        <el-button type="primary" @click="download">下载</el-button>
    </div>
</template>
<script setup>
import { ref, onUnmounted, onMounted, reactive } from 'vue'
import QRCode from 'qrcode'
import { BrowserMultiFormatReader } from '@zxing/library'
import { Plus } from '@element-plus/icons-vue'
//二维码的信息
const text = ref(localStorage.getItem("Name") + localStorage.getItem("Company") + localStorage.getItem("CreateBatch") + localStorage.getItem("CreateCode"))
const size = ref(200)
const color = ref('#000000')
const canvasRef = ref(null)
const codeReader = new BrowserMultiFormatReader()
let cameraRunning = false
onMounted(() => {
    generate();
})
const generate = async () => {
    if (!text.value) return
    await QRCode.toCanvas(canvasRef.value, text.value, {
        width: size.value,
        color: {
            dark: color.value,
            light: '#ffffff'
        }
    })
}
const download = () => {
    const canvas = canvasRef.value
    const link = document.createElement('a')
    link.download = 'qrcode.png'
    link.href = canvas.toDataURL('image/png')
    link.click()
}
const stopCamera = () => {
    cameraRunning = false
    codeReader.reset()
}
onUnmounted(() => stopCamera())
const cameraSupported = 'mediaDevices' in navigator
</script>

<style scoped>
.qr-code-box {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}


canvas {
    display: block;
    margin: auto;
    border: 1px solid pink;
    border-radius: 16px;
}
</style>
